<template>
  <div class="range-edit">
    <el-container>
      <el-header>
        <el-button type="primary" @click="">保存</el-button>
        <el-button type="primary" @click="delAdd = false">取消</el-button>
      </el-header>
      <el-main>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item
                label="运营名字:"
                prop="name"
                required
                style="width: 300px"
              >
                <el-input
                  v-model="ruleForm.product_name"
                  placeholder="输入运营名字"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品名称:" prop="name" style="width: 300px">
                <el-input v-model="ruleForm.name" placeholder="输入产品名字" />
                <el-button
                  text
                  :icon="Search"
                  circle
                  @click="tableEvt"
                  id="name-buttom"
                >
                </el-button>
                <el-dialog
                  v-model="dialogTableVisible"
                  title="选择运营产品数据"
                  style="background: pink; height: 700px"
                >
                  <div class="my-header">
                    <el-input
                      v-model="namequery"
                      placeholder="输入运营名称"
                      style="width: 220px"
                    />
                    <el-button type="primary" @click="queryEvt(myquery)"
                      >查询</el-button
                    >
                  </div>
                  <!-- :data="state.gridData" -->
                  <el-table
                    :data="state.gridData"
                    height="500"
                    style="background: #fff"
                  >
                    <el-table-column property="name" label="名字" width="150" />
                    <el-table-column
                      property="price"
                      label="价格"
                      width="200"
                    />
                    <el-table-column property="brand" label="品牌" />
                    <el-table-column property="" label="产商" />
                    <el-table-column property="place" label="产地" />
                    <el-table-column property="id" label="id" />
                    <el-table-column property="addressregion" label="操作">
                      <template #default="scope">
                        <el-button
                          type="danger"
                          size="small"
                          @click="choiceEvt(scope.row)"
                          >选择</el-button
                        >
                      </template>
                      <!-- <el-button plain id="plain" slot-scope="scope" @cell-click="choiceEvt()">选择</el-button> -->
                    </el-table-column>
                  </el-table>
                  <el-footer>
                    <div class="demonstration">共好{{ count }}条数据</div>
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="count"
                      :page-size="size"
                      @current-change="handleCurrentChange"
                    />
                  </el-footer>
                </el-dialog>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开售时间:" prop="name" style="width: 300px">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="ruleForm.createdAt"
                  type="date"
                  placeholder="选择开售时间"
                  format="YYYY/MM/DD"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下架时间" prop="name" style="width: 300px">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="ruleForm.updatedAt"
                  type="date"
                  placeholder="选择下架时间时间"
                  format="YYYY/MM/DD"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="成本价:" prop="name" style="width: 300px">
                <el-input
                  v-model="ruleForm.pure_price"
                  placeholder="输入成本价"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运营价:" prop="name" style="width: 300px">
                <el-input v-model="ruleForm.price" placeholder="输入运营价" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="投放数量:" prop="name" style="width: 300px">
                <el-input v-model="ruleForm.count" placeholder="输入投放数量" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="限购数量:" prop="name" style="width: 300px">
                <el-input v-model="ruleForm.limit" placeholder="输入限购数量" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="运营区域:" prop="name" style="width: 100%">
                <el-input v-model="ruleForm.address" placeholder="选择区县" />
              </el-form-item>
            </el-col>
            <el-col>
              <!-- <el-form-item label="备注：" prop="name" style="width:100%">
                               <textarea name="备注" v-model="ruleForm.remark"  placeholder="备注"  cols="30" rows="10" style="width:100%"></textarea>
                            </el-form-item> -->
              <el-form-item label="备注:" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  placeholder="备注"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { productList, rangeAddApi } from "@/apis/productlist";
// const value=ref("")
let dialogTableVisible = ref(false);
const formSize = ref("default");
const ruleFormRef = ref();
// 查询搜索框
const namequery = ref("");
// 数据总数
const count = ref(0);
// 请求页数
const page = ref(1);
// 请求条数
const size = ref(20);
//
const delAdd = ref(true);

const ruleForm = reactive({
  name: "",
  count: 0,
  pure_price: 0,
  price: 0,
  limit: 0,
  sale_stime: "",
  sale_etime: "",
  product_id: "",
  product_name: "",
  address: "",
  remark: "",
});
//表单验证方法
const rules = reactive({
  product_name: [
    { required: true, message: "运营名字必须选择", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  name: [{ required: true, message: "产品名称必须选择", trigger: "blur" }],
  pure_price: [
    {
      required: true,
      message: "成本价必须选择",
      trigger: "change",
    },
  ],
  price: [
    {
      required: true,
      message: "运营价格必须选择",
      trigger: "change",
    },
  ],
  count: [
    {
      // type: 'date',
      required: true,
      message: "投放数量必须选择",
      trigger: "change",
    },
  ],
  limit: [
    {
      // type: 'date',
      required: true,
      message: "限购数量必须选择",
      trigger: "change",
    },
  ],
  address: [
    {
      // type: 'date',
      required: true,
      message: "运营区域必须选择",
      trigger: "change",
    },
  ],
});
const state = reactive({
  // 产品列表
  gridData: [],
});
//新增方法
// const rangeAdd=async()=>{
//    const add=await rangeAdd({ruleForm})
//    console.log(add);
// }
//搜索方法
const queryEvt = () => {
  // console.log(namequery.value);
  tableEvt({ namequery: namequery.value });
};
// 选择方法id
const choiceEvt = (row) => {
  ruleForm.name = row.name;
  ruleForm.createdAt = row.createdAt;
  ruleForm.updatedAt = row.updatedAt;
  dialogTableVisible.value = false;
};
// 请求运营产品数据
const tableEvt = async ({
  page = 1,
  size = 20,
  name = namequery.value,
} = {}) => {
  dialogTableVisible.value = true;
  try {
    // 发送网络请求查询数据
    console.log(namequery);
    const { data } = await productList({ page, size, name });
    // console.log('result:', result)
    // 处理查询结果
    state.gridData = data.rows;
    count.value = data.count;
    //       count.value=data.count
    console.log(data);
  } catch (error) {
    console.log("error:", error);
  }
};

//分页请求数据
const handleCurrentChange = (page) => {
  tableEvt({ page });
};
// const gridData = [
//   {
//     date: '2016-05-02',
//     name: 'John Smith',
//     address: 'No.1518,  Jinshajiang Road, Putuo District',
//   },
//   {
//     date: '2016-05-04',
//     name: 'John Smith',
//     address: 'No.1518,  Jinshajiang Road, Putuo District',
//   },
//   {
//     date: '2016-05-01',
//     name: 'John Smith',
//     address: 'No.1518,  Jinshajiang Road, Putuo District',
//   },
//   {
//     date: '2016-05-03',
//     name: 'John Smith',
//     address: 'No.1518,  Jinshajiang Road, Putuo District',
//   },
// ]
</script>

<style lang="less" scoped>
@import "@/style/common.less";

.range-edit {
  .reuse();
}

.el-header {
  .header();

  .el-button:last-child {
    background: @h1;
    color: @h13;
    border: none;
  }
  .el-button:nth-child(1) {
    background: @m7;
  }
}
.my-header {
  display: block;
  height: 40px;
  padding: 0px 12px 8px 12px;
  // background: indianred;
  border-bottom: 1px solid #ddd;
  text-align: right;
  .el-input {
    margin-right: 10px;
  }
}
.el-footer {
  width: 100%;
  height: 42px;
  // background: @m3;
  display: flex;
  justify-content: right;
  align-items: center;
  .el-pagination {
    margin-left: 5px;
  }
}
.el-dialog {
  .el-dialog__header {
    height: 30px;
  }
}

#plain {
  border: none;
  color: @m7;
}
.el-footer {
  float: right;
}
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
#name-buttom {
  width: 32px;
  height: 32px;
  border-radius: 0px;
  position: absolute;
  top: 0;
  background: @m7;
  right: 0;
}
.el-input {
  position: relative;
}
</style>
